<script>
// 如果想要使用mapState的话，就需要自己引入
import {nanoid} from "nanoid";

export default {
  name: 'Person',
  data() {
    return {
      name: '',
    }
  },
  computed: {
    // // 程序员编写代码，使用计算属性实现
    personList() {
      return this.$store.state.personOptions.personList;
    },
    // 使用 mapState生成代码片段
    // ...mapState('countOptions', ['sum']),
    // ...mapState('personOptions', ['personList']),

    sum() {
      return this.$store.state.countOptions.sum;
    },
    // mapGetters 对象写法
    // ...mapGetters('personOptions', {firstPersonName: 'firstPersonName'}),
    // mapGetters 数组写法
    // ...mapGetters('personOptions', ['firstPersonName']),
    // 如果不是使用...mapGetters来生成代码片段的话，程序员自己编写的话，需要使用下面的语法，因为.后面不能跟/，所以可以使用[]来获取到属性
    firstPersonName() {
      return this.$store.getters["personOptions/firstPersonName"];
    }
  },
  methods: {
    add() {
      const person = {
        id: nanoid(),
        name: this.name,
        age: 18
      }
      console.log(JSON.stringify(person));
      // 如果没有业务操作，可以直接跳过Actions，执行mutations
      this.$store.commit('personOptions/ADD_PERSON', person);
      // 添加成功之后将输入框置空
      this.name = '';
    },
    addWang() {
      const person = {
        id: nanoid(),
        name: this.name,
        age: 18
      }
      console.log(JSON.stringify(person));
      if (this.name.indexOf('王') !== 0) {
        alert("不是姓王的人，不能添加，请检查！");
      }
      // 如果没有业务操作，可以直接跳过Actions，执行mutations
      this.$store.dispatch('personOptions/addPersonWang', person);
      // 添加成功之后将输入框置空
      this.name = '';
    },
    addPersonServer() {
      const person = {
        id: nanoid(),
        name: this.name,
        age: 18
      }
      console.log(JSON.stringify(person));
      // 如果没有业务操作，可以直接跳过Actions，执行mutations
      this.$store.dispatch('personOptions/addPersonServer', person);
      // 添加成功之后将输入框置空
      this.name = '';
    }
  }
}

</script>

<template>
  <div>
    <h1>人员列表：</h1>
    <h2 style="color: red">Count组件的sum：{{ sum }}</h2>
    <h2>获取到第一个人员的姓名：{{ firstPersonName }}</h2>
    <input @keyup.enter="add()"
           placeholder="请输入您的姓名"
           type="text"
           v-model.trim="name"/>
    <button @click="add()">添加</button>
    <button @click="addWang()">添加一个姓王的人</button>
    <button @click="addPersonServer()">从服务器端获取人员</button>
    <ul>
      <!-- <li v-for="p in $store.state.personList" :key="p.id">{{p.name}} - {{ p.age}}</li>-->
      <li v-for="p in personList" :key="p.id">{{ p.name }} - {{ p.age }}</li>
    </ul>
  </div>
</template>

<style scoped>

</style>